<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<% pageContext.setAttribute("ctp",request.getContextPath()); %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<title>人事管理系统 ——文档管理</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
	<meta http-equiv="description" content="This is my page" />
	<link href="${ctp}/css/css.css" type="text/css" rel="stylesheet" />
	<link href="${ctp}/css/pager.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="${ctp}/js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="${ctp}/js/jquery-migrate-1.2.1.js"></script>
	<link href="${ctp}/js/ligerUI/skins/Aqua/css/ligerui-dialog.css" rel="stylesheet" type="text/css" />
	<link href="${ctp}/css/jquery.pagination.css" rel="stylesheet" type="text/css" />
	<script src="${ctp}/js/ligerUI/js/core/base.js" type="text/javascript"></script>
	<script src="${ctp}/js/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
	<script src="${ctp}/js/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
	<script src="${ctp}/js/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
	<script src="${ctp}/js/jquery.pagination.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	    $(function(){
	    	
	    	var boxs = $("input[type='checkbox'][id^='box_']");
	    	/** 给全选按钮绑定点击事件  */
	    	$("#checkAll").click(function(){
	    		// this是checkAll  this.checked是true
	    		// 所有数据行的选中状态与全选的状态一致
	    		boxs.attr("checked",this.checked);
	    	})
	    	
	    	/** 给每个数据行绑定点击事件：判断如果数据行都选中全选也应该选中，反之  */
	    	boxs.click(function(event){
	    		/** 去掉复选按钮的事件传播：点击复选会触发行点击：因为复选在行中 */
	    		event.stopPropagation();
	    		
	    		/** 判断当前选中的数据行有多少个  */
	    		var checkedBoxs = boxs.filter(":checked");
	    		/** 判断选中的总行数是否等于总行数：以便控制全选按钮的状态   */
	    		$("#checkAll").attr("checked",checkedBoxs.length == boxs.length);
	    	})
	    	
	    	/** 给数据行绑定鼠标覆盖以及鼠标移开事件  */
	    	$("tr[id^='data_']").hover(function(){
	    		$(this).css("backgroundColor","#eeccff");
	    	},function(){
	    		$(this).css("backgroundColor","#ffffff");
	    	}).click(function(){
	    		/** 控制该行是否需要被选中 */
	    		/** 获取此行的复选框id */
	    		var checkboxId = this.id.replace("data_","box_");
	    		
	    		/** 触发本行的复选点击 */
	    		$("#"+checkboxId).trigger("click");
	    	})
	    	
	    	/** 删除员工绑定点击事件 */
	 	   $("#delete").click(function(){
	 		   /** 获取到用户选中的复选框  */
	 		   var checkedBoxs = boxs.filter(":checked");
	 		   if(checkedBoxs.length < 1){
	 			   $.ligerDialog.error("请选择一个需要删除的文档！");
	 		   }else{
	 			   /** 得到用户选中的所有的需要删除的ids */
	 			   var ids = checkedBoxs.map(function(){
	 				   return this.value;
	 			   })
	 			   
	 			   $.ligerDialog.confirm("确认要删除吗?","删除文档",function(r){
	 				   if(r){
	 					   // alert("删除："+ids.get());
	 					   // 发送请求
	 					  window.location = "${ctp}/document/deletedocument?ids=" + ids.get();
	 				   }
	 			   });
	 		   }
	 	   })
	    	
	    	/** 下载文档功能 */
	    	$("a[id^='down_']").click(function(){
	    		/** 得到需要下载的文档的id */
	    		var id = this.id.replace("down_","");
	    		/** 下载该文档 */
	    		window.location = "${ctp}/document/download?id="+id;
	    	})
	    	
	    	
	    	
	    })
	    
	    function down(id){
	    	$("a[id='down_"+id+"']").trigger("click");
	    }
	    
	</script>
</head>
<body>
	<!-- 导航 -->
	<table width="100%" border="0" cellpadding="0" cellspacing="0">
	  <tr><td height="10"></td></tr>
	  <tr>
	    <td width="15" height="32"><img src="${ctp}/images/main_locleft.gif" width="15" height="32"></td>
		<td class="main_locbg font2"><img src="${ctp}/images/pointer.gif">&nbsp;&nbsp;&nbsp;当前位置：文档管理 &gt; 文档查询</td>
		<td width="15" height="32"><img src="${ctp}/images/main_locright.gif" width="15" height="32"></td>
	  </tr>
	</table>
	
	<table width="100%" height="90%" border="0" cellpadding="5" cellspacing="0" class="main_tabbor">
	  <!-- 查询区  -->
	  <tr valign="top">
	    <td height="30">
		  <table width="100%" border="0" cellpadding="0" cellspacing="10" class="main_tab">
		    <tr>
			  <td class="fftd">
			  	
				    <table width="100%" border="0" cellpadding="0" cellspacing="0">
					  <tr>
					    <td class="font3">
							<form action="${ctp}/document/selectdocument">
								标题：<input type="text" name="title" value="${documentInf.title}"/>
								<input type="submit"  value="搜索"/>
								<input type="button" id="delete" value="删除">
							</form>
					    </td>
					  </tr>
					</table>
				
			  </td>
			</tr>
		  </table>
		</td>
	  </tr>
	  
	  <!-- 数据展示区 -->
	  <tr valign="top">
	    <td height="20">
		  <table width="100%" border="1" cellpadding="5" cellspacing="0" style="border:#c2c6cc 1px solid; border-collapse:collapse;">
		    <tbody><tr class="main_trbg_tit" align="center">
		      <td><input type="checkbox" id="checkAll"></td>
			  <td>标题</td>
			  <td>创建时间</td>
			  <td>创建人</td>
			  <td>描述</td>
			  	
			  <td>操作</td>
			  
			  <td>下载</td>
			</tr>
			
<%--				<tr ondblclick="down(7);" class="main_trbg" align="center" id="data_0" style="background-color: rgb(255, 255, 255);">--%>
<%--					<td><input type="checkbox" id="box_0" value="7"></td>--%>
<%--					 <td>文件哈</td>--%>
<%--					 <td>--%>
<%--					  	2019年4月6日--%>
<%--					  </td>--%>
<%--					  <td>songyq</td>--%>
<%--					  <td>这是一个文件</td>--%>
<%--					  	--%>
<%--					 <td align="center" width="40px;"><a href="showUpdateDocument.html">--%>
<%--							<img title="修改" src="${ctp}/images/update.gif"></a>--%>
<%--					  </td>--%>
<%--					  --%>
<%--					  <td align="center" width="40px;"><a href="#" id="down_7">--%>
<%--							<img width="20" height="20" title="下载" src="../../images/downLoad.png"></a>--%>
<%--					  </td>--%>
<%--				</tr>--%>
					<c:forEach items="${documentInfPageInfo.list}" var="document">
						<tr ondblclick="down(${document.id});" class="main_trbg" align="center" id="data_${document.id}" style="background-color: rgb(255, 255, 255);">
							<td><input type="checkbox" id="box_${document.id}" value="${document.id}"></td>
							<td>${document.title}</td>
							<td>
								${document.createDate}
							</td>
							<td>${document.userInf.username}</td>
							<td>${document.remark}</td>

							<td align="center" width="40px;"><a href="${ctp}/document/toUpdatedocument?id=${document.id}">
								<img title="修改" src="${ctp}/images/update.gif"></a>
							</td>

							<td align="center" width="40px;"><a href="#" id="down_${document.id}">
								<img width="20" height="20" title="下载" src="${ctp}/images/downLoad.png"></a>
							</td>
						</tr>
					</c:forEach>
			 

		  </tbody></table>
		</td>
	  </tr>
	  <!-- 分页标签 -->
	  <tr valign="top"><td align="center" class="font3">
	  	   <table width="100%" align="center" style="font-size:13px;" class="flickr">
			   <tbody>
			   <tr>
				   <td style="COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; TEXT-DECORATION: none">
<%--					   <span class="disabled">上一页</span>--%>
<%--					   <span class="current">1</span>--%>
<%--					   <span class="disabled">下一页</span>&nbsp;--%>
					   <div id="M-box">

					   </div>
						<form action="${ctp}/document/selectdocument">
							跳转到&nbsp;&nbsp;
							<input style="text-align: center;BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none" type="text" size="2" id="pager_jump_page_size" name="page">&nbsp;
							<input type="hidden" name="title" value="${documentInf.title}">
							<input type="submit" style="text-align: center;BORDER-RIGHT: #dedfde 1px solid; PADDING-RIGHT: 6px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #dedfde 1px solid; PADDING-LEFT: 6px; PADDING-BOTTOM: 2px; BORDER-LEFT: #dedfde 1px solid; COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #dedfde 1px solid; TEXT-DECORATION: none" value="确定" id="pager_jump_btn">
						</form>
				   </td>
			   </tr>
			   <tr align="center">
				   <td style="font-size:13px;"></td>
			   </tr>
			   <tr>
				   <td style="COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; TEXT-DECORATION: none">
					   总共<font color="red">${documentInfPageInfo.total}</font>条记录，当前显示${documentInfPageInfo.startRow}-${documentInfPageInfo.endRow}条记录。
				   </td>
			   </tr>
			   </tbody>
		   </table>
	  </td></tr>
	</table>
	<div style="height:10px;"></div>
	<script>


		$(function (){
			var pageNum = ${documentInfPageInfo.pageNum};
			var pages = ${documentInfPageInfo.pages};

			$("#M-box").pagination({
				currentPage: pageNum,
				totalPage: pages,
				num_edge_entries:4,
				num_display_entries:10,
				homePageText:"首页",
				prevPageText:"上一页",
				nextPageText:"下一页",
				endPageText:"尾页",
				callback: function (current) {
					location.href = "${ctp}/document/selectdocument?page="+current+"&title=${documentInf.title}";
				}
			});

			$(function(){
				$("#checkAll").click(function(){
					$("input[name='check']").prop("checked",this.checked);
				});
			})
		});
	</script>
</body>
</html>